<template>
<div class="merchant-withdraw views-container">
    <el-dialog @close="resetDialogFormData" :visible.sync="dialogTableVisible" custom-class="reset-pwd wlm-form-dialog dialog-table">
        <div class="wlm-form" v-if="dialogTableVisible">
            <div class="wlm-form-header wlm-dialog-fixheader">
                <span class="wlm-dialog-inlenr">修改打款金额</span>
            </div>
            <el-scrollbar wrap-class="scrollbar-wrapper">
                <div class="wlm-form-content">
                    <div class="wlm-dialog-main">
                        <div class="wlm-dialog-content">
                            <el-form ref="userForm" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                                <el-form-item label="打款金额">
                                    <el-input-number :controls="false" :min="1" v-model="formFormatData.formData.deserved_pay"></el-input-number>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </div>
            </el-scrollbar>
        </div>
        <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
            <el-button size="small" type="primary" @click="formFormatSubmit">确定</el-button>
        </footer>
    </el-dialog>
    <el-dialog @close="clearReason" :visible.sync="dialogVisibleImg" width="30%" custom-class="reset-pwd wlm-form-dialog dialog-table">
        <div class="wlm-form" v-if="dialogVisibleImg">
            <div class="wlm-form-header wlm-dialog-fixheader">
                <span class="wlm-dialog-inlenr">拒绝审核</span>
            </div>
            <el-scrollbar wrap-class="scrollbar-wrapper">
                <div class="wlm-form-content">
                    <div class="wlm-dialog-main">
                        <div class="wlm-dialog-content">
                            <el-form :model="openDialogText" size="small" label-width="120px" class="retail-form" label-position="right">
                                <el-form-item label="原因">
                                    <el-input v-if="!isReasonText" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" v-model="reason">
                                    </el-input>
                                    <p v-if="isReasonText">{{reasonText}}</p>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </div>
            </el-scrollbar>
        </div>
        <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
            <el-button v-if="isReasonText" size="small" type="primary" @click="dialogVisibleImg=false">关闭</el-button>
            <el-button v-if="!isReasonText" size="small" type="primary" @click="reasonSave" :loading="loading">确定</el-button>
        </footer>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisibleTag" width="30%" @close="clearData" custom-class="reset-pwd wlm-form-dialog dialog-table">
        <div class="wlm-form" v-if="dialogVisibleTag">
            <div class="wlm-form-header wlm-dialog-fixheader">
                <span class="wlm-dialog-inlenr">标记</span>
            </div>
            <el-scrollbar wrap-class="scrollbar-wrapper">
                <div class="wlm-form-content">
                    <div class="wlm-dialog-main">
                        <div class="wlm-dialog-content">
                            <el-form ref="userForm" :model="openDialogText" size="small" label-width="120px" class="retail-form" label-position="right">
                                <el-form-item label="标记">
                                    <el-radio-group v-model="historyColor">
                                        <el-radio label="red">
                                            <svg-icon icon-class="qisan" class="qi-svg red" />
                                        </el-radio>
                                        <el-radio label="yellow">
                                            <svg-icon icon-class="qisan" class="qi-svg yellow" />
                                        </el-radio>
                                        <el-radio label="green">
                                            <svg-icon icon-class="qisan" class="qi-svg green" />
                                        </el-radio>
                                        <el-radio label="blue">
                                            <svg-icon icon-class="qisan" class="qi-svg blue" />
                                        </el-radio>
                                        <el-radio label="purple">
                                            <svg-icon icon-class="qisan" class="qi-svg purple" />
                                        </el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="标记信息">
                                    <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4}" v-model="historyRemark">
                                    </el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </div>
            </el-scrollbar>
        </div>
        <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
            <el-button size="small" @click="dialogVisibleTag=false">关闭</el-button>
            <el-button size="small" type="primary" @click="saveDialog">确定</el-button>
        </footer>
    </el-dialog>
    <div class="wlm-table">
        <div class="wlm-table-header">
            <el-form :model="tableFormatData.userTable.files" size="small" label-width="85px" class="retail-form" label-position="right">
                <el-form-item label="" class="filter">
                    <el-form-item label="搜索内容：" class="search">
                        <el-input @keyup.enter.native="filesSerch" v-model="tableFormatData.userTable.files.value" placeholder="请输入用户昵称或商家名称" style="width:200px;"></el-input>
                    </el-form-item>
                    <el-form-item label="提现方式：" class="search">
                        <el-select v-model="tableFormatData.userTable.files.withdrawal_type" placeholder="请选择">
                            <el-option v-for="item in [{lable:'微信',value:'wechat'},{lable:'银行卡',value:'card'}]" :key="item.value" :label="item.lable" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="" class="filter-btns">
                    <el-button type="primary" @click="filesSerch">筛选</el-button>
                    <el-button type="text" @click="filesEmpty">清空筛选条件</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="wlm-table-content">
            <el-tabs v-model="tableFormatData.userTable.files.status" type="card" @tab-click="filesSerch">
                <!-- @tab-click="filesSerch" -->
                <el-tab-pane label="全部申请" name="0"></el-tab-pane>
                <el-tab-pane label="待审核" name="2"></el-tab-pane>
                <el-tab-pane label="待打款" name="5"></el-tab-pane>
                <el-tab-pane label="已打款" name="4"></el-tab-pane>
                <el-tab-pane label="已驳回" name="3"></el-tab-pane>
            </el-tabs>
            <el-table :ref="tableFormatData.userTable.key" :data="tableFormatData.userTable.tableData" @selection-change="handleSelectionChange" style="width: 100%">
                <el-table-column v-if="tableFormatData.userTable.files.status == '20' || tableFormatData.userTable.files.status == '10'" type="selection" width="55">
                </el-table-column>
                <el-table-column prop="date" label="商家名称" min-width="60">
                    <template slot-scope="scope">
                        <div class="wlm-table-logos">
                            <img class="logo" :src="scope.row.logo">
                            <div class="inner-text">
                                <p>{{scope.row.name}}</p>
                            </div>
                        </div>
                        
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="用户" min-width="50">
                    <template slot-scope="scope">
                        <div class="wlm-table-logos">
                            <img class="logo" v-if="scope.row.avatarUrl" :src="scope.row.avatarUrl">
                            <div class="inner-text">
                                <p>{{scope.row.nickName}}</p>
                                <span>ID:{{scope.row.user_id}}</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="提现方式" min-width="30">
                    <template slot-scope="scope">
                        <span v-show="scope.row.withdrawal_type=='wechat'">微信</span>
                        <span v-show="scope.row.withdrawal_type=='alipay'">支付宝</span>
                        <span v-show="scope.row.withdrawal_type=='card'">银行卡</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="提现信息" min-width="50">
                    <template slot-scope="scope">
                        <p>{{scope.row.withdrawal_name}}</p>
                        <p v-if="scope.row.bank_name&&scope.row.withdrawal_type=='card'">{{scope.row.bank_name}}</p>
                        <div>{{scope.row.withdrawal_num}}
                            <!-- <el-popover trigger="hover" placement="top">
                                <div>
                                    <p>提现金额：{{scope.row.apply_pay}}</p>
                                    <p>实际打款金额：{{scope.row.deserved_pay}}</p>
                                    <p>手续费：{{scope.row.settlement_pay}}</p>
                                </div>
                                <span style="cursor: pointer;margin-left:6px;" slot="reference"><i class="el-icon-warning orders-blue"></i></span>
                            </el-popover> -->
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="申请金额" min-width="30">
                    <template slot-scope="scope">
                      <p>{{scope.row.balance}}</p>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="name" label="到账金额" min-width="30">
                    <template slot-scope="scope">
                      <p>{{scope.row.deserved_pay}}</p>
                    </template>
                </el-table-column> -->
                <el-table-column prop="name" label="状态" min-width="30">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status==1">待打款</span>
                        <span v-if="scope.row.status==2">待审核</span>
                        <span v-if="scope.row.status==3">已驳回</span>
                        <span v-if="scope.row.status==4">已打款</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="申请时间" min-width="40">
                    <template slot-scope="scope">
                        <span>{{ scope.row.create_time  }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="95">
                    <template slot-scope="scope">
                        <div class="operation-group">
                            <el-button class="wlm-text" v-if="scope.row.status==2" type="text" @click="entering(scope.row.id,1,'是否确认通过审核？')">通过</el-button>
                            <div v-if="scope.row.status==2" class="btn-line"></div>
                            <el-button class="wlm-text" v-if="scope.row.status==2" type="text" @click="dialogVisibleImg=true,reasonId=scope.row.id">拒绝</el-button>
                            <el-button  class="wlm-text" type="text" v-if="scope.row.status==1" @click="enteringbtn(scope.row.id,'是否确认打款？')">打款</el-button>
                            <div v-if="scope.row.status==1" class="btn-line"></div>
                            <el-button  class="wlm-text" type="text" v-if="scope.row.status==1" @click="enteringsign(scope.row.id,'是否标记已打款？')">标记已打款</el-button>
                            <div v-if="scope.row.status==1" class="btn-line"></div>
                            <el-button v-if="scope.row.status==1" class="wlm-text" type="text" @click="entering(scope.row.id,2,'是否确认退回审核？')">退回审核</el-button>
                            <span style="margin-right:10px;"  v-if="scope.row.is_payment==1" >-</span>
                            <el-button class="wlm-text" v-if="scope.row.status==3" type="text" @click="dialogVisibleImg=true,reasonText=scope.row.reason,isReasonText=true">驳回原因</el-button>

                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-content flex-row flex-justify-e flex-align-c">
                <el-pagination :disabled="!hasTableData" @size-change="listPageChange" @current-change="listPageChange" :current-page.sync="tableFormatData.userTable.pagination.page" :page-sizes="tableFormatData.userTable.pagination.pagesizes" :page-size.sync="tableFormatData.userTable.pagination.list_rows" layout="total, sizes, prev, pager, next, jumper" :total="hasTableData?tableFormatData.userTable.pagination.total : 0">
                </el-pagination>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import {
  delWithdrawInfo,
  editApplyMoney
} from '@/api/distribution'
import {
  busBalanceApplyIndex,
  editApplyStatus,
  busBalanceApplyStatus,
  busBalanceApplyPayMoney,
  addBackstageRemark,
  busBalanceApplyBjPayMoney
} from '@/api/merchant'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Table'), mixins.getters('Form')],
  name: 'MerchantWithdraw',
  components: {

  },
  created() {
  },
  data() {
    return {
      reason: '',
      dialogTableVisible: false,
      reasonId: '',
      loading:false,
      isReasonText: false,
      dialogVisibleImg: false,
      dialogVisibleTag: false,
      historyColor: 'red',
      historyRemark: '',
      historyId: '',
      openDialogText: {},
      formFormatData: {
        key: 'userForm',
        model: {
          noCreateEdit: true,
          bindDialog: 'dialogTableVisible'
        },
        api: {
          editForm: {
            params: {

            }
          },
          submitForm: editApplyMoney
        },
        formData: {
          deserved_pay: ''
        },
        rules: {

        }
      },
      tableFormatData: {
        current: 'userTable',
        userTable: {
          key: 'userTable',
          api: {
            getList: busBalanceApplyIndex,
            delList: delWithdrawInfo,
            msgConfig: {
              del: {
                type: 'warning',
                msg: '是否确认删除分销申请？'
              }
            }
          },
          tableData: [],
          files: {
            value: '',
            status:'',
            ids: [],
            checkall: '0',
            Recycle: '1'
          },
          change: {
            refund: {
              name: '退款',
              key: 'refund',
              api: editApplyStatus
            }
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      }
    }
  },
  methods: {
    openDialog(color, remark, id) {
      console.log(color, remark, id)
      color === undefined ? this.historyColor = 'red' : this.historyColor = color
      this.historyRemark = remark
      this.historyId = id
      this.dialogVisibleTag = true
    },
    clearData() {
      this.historyColor = ''
      this.historyRemark = ''
      this.historyId = ''
    },
    saveDialog() {
      addBackstageRemark({ id: this.historyId, color: this.historyColor, remark: this.historyRemark, key: 'business_apply' }).then((response) => {
        const {
          data: {
            code: msgData = []
          }
        } = response
        if (msgData === 1) {
          this.dialogVisibleTag = false
          this.filesSerch()
        }
      })
    },
    clearReason() {
      this.reason = ''
      this.reasonId = ''
      this.isReasonText = false
      this.reasonText = ''
    },
    reasonSave() {
      this.loading = true
      if (this.reason === '') {
        this.$message({
          type: 'error',
          message: '请填写拒绝原因!'
        })
        this.loading = false
      } else {
        busBalanceApplyStatus({ id: this.reasonId, status: 3, reason: this.reason }).then((response) => {
          const { data: { code, data, msg } } = response
          console.log(data)
          if (code === 1) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.loading = false
            this.dialogVisibleImg = false
            this.filesSerch()
          } else {
            this.$message.error(msg)
          }
        })
      }
    },
    entering(id, a_status, noticeMsg) {
      this.$confirm(noticeMsg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        busBalanceApplyStatus({ id: id,status:a_status}).then((response) => {
          const { data: { code, data, msg } } = response
          console.log(data)
          if (code === 1) {
            this.$message({
              type: 'success',
              message: '审核成功!'
            })
            this.filesSerch()
          } else {
            this.$message.error(msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    enteringbtn(id,daMsg){
        this.$confirm(daMsg,'提示',{
             confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        }).then(()=>{
            busBalanceApplyPayMoney({id:id}).then(res=>{
                 const { data: { code, data, msg } } = res
                 if (code === 1) {
                    this.$message({
                    type: 'success',
                    message: '打款成功!'
                    })
                        this.filesSerch()
                    } else {    
                        this.$message.error(msg)
                    }
                        })
        })
    },
    enteringsign(id,daMsg){
        this.$confirm(daMsg,'提示',{
             confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        }).then(()=>{
            busBalanceApplyBjPayMoney({id:id}).then(res=>{
                 const { data: { code, data, msg } } = res
                 if (code === 1) {
                    this.$message({
                    type: 'success',
                    message: '标记已打款成功!'
                    })
                        this.filesSerch()
                    } else {    
                        this.$message.error(msg)
                    }
                        })
        })
    },
  }
}
</script>

<style lang="scss" scoped>
.merchant-withdraw {
    .qi-svg {
        font-size: 15px;
        fill: #ccc;
        cursor: pointer;
    }

    .qi-svg.red {
        fill: rgb(245, 108, 108);
    }

    .qi-svg.yellow {
        fill: rgb(250, 212, 0);
    }

    .qi-svg.green {
        fill: rgb(104, 211, 135);
    }

    .qi-svg.blue {
        fill: rgb(64, 158, 255);
    }

    .qi-svg.purple {
        fill: rgb(199, 21, 133);
    }
}
</style>
